<%--
  Created by IntelliJ IDEA.
  User: cjbi
  Date: 2018/4/6
  Time: 7:43
  空页面.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        相册管理
        <small>相册管理页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">相册管理</a></li>
        <li class="active">图片信息</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="form-group">
                    <form method="post" enctype="multipart/form-data" id="pic_form">
                        <input type="file" name="file"  id="imageUpload" accept="image/gif,image/png,image/jpeg" required style="display: inline;"/>

                        <%--  <select name="imgtype">
                              <option value="all">所有</option>
                              <!--selected="selected":默认选择-->
                              <option value="family" selected="selected">家庭</option>
                              <option value="person">个人</option>
                              <option value="classmates">同学</option>
                              <option value="buddies">朋友</option>
                          </select>--%>
                        <button type="button"  onclick="uploadPicForm()" style="display: inline;">上传</button>
                        <div id="errorMessage" style="color: #131313;display: inline;"></div>
                    </form>

                </div>
                    <!-- /.box-header -->
                    <div class="box-body">


                    </div>
                <div class="pagination">
                    <button class="prev" disabled>上一页</button>
                    <span class="current-page">1</span>
                    <button class="next">下一页</button>
                </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>


<script>

    var  paginationParam = {
        sort: 1,
        order: 'asc',
        search: '',
        offset: 0,
        limit: 15
    };

    var photoTotalPages = 1;
    var photoCurrentPage = 1;

    // 更新分页按钮状态
    function updatePaginationButtons() {
        $('.prev').prop('disabled', photoCurrentPage === 1);
        $('.next').prop('disabled', photoCurrentPage === photoTotalPages);
        $('.current-page').text(photoCurrentPage);
    }

    // 加载数据
    function fetchData() {
        $.ajax({
            url:'photo/list',
            type:'post',
            data: paginationParam, // 直接传递对象
            success:function(data){
                var imgHtml= "";
                photoTotalPages = Math.ceil(data.total / paginationParam.limit)
                $.each(data.rows, function (i, item) {
                    //console.log(item[0])
                    imgHtml = imgHtml + '<div class="image-container" id="'+item.id+'"><a href="' +path +'/'+item.storagePath
                        +'" data-lightbox="image-set" data-title="My caption"><img src="'
                        +path +'/'+item.thumbnailPath +'" alt="My image"><button class="delete-button" onclick="deleteImage(event, '+item.id+');event.stopPropagation(); event.preventDefault();">删除</button> </div>';
                })
                $(".box-body").html(imgHtml);
                updatePaginationButtons();// 更新分页按钮状态
            },
            error: function(xhr, status, error) {
                console.error('Failed to fetch data:', error);
            }
        })
    }

    function uploadPicForm() {
        var fileInput = $('#imageUpload')[0];
        var file = fileInput.files[0];
        var maxSize = 5 * 1024 * 1024; // 5MB
        var allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        var maxWidth = 1920; // 最大宽度
        var maxHeight = 1080; // 最大高度

        if (!file) {
            showError('请选择一张图片');
            return;
        }
        if (!allowedTypes.includes(file.type)) {
            showError('仅支持 JPG、PNG 和 GIF 格式的图片');
            return;
        }
        if (file.size > maxSize) {
            showError('图片大小不能超过 5MB');
            return;
        }

        // 检查图片尺寸
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();
            img.onload = function() {
                if (img.width > maxWidth || img.height > maxHeight) {
                    showError('图片尺寸不能超过 ${maxWidth}x${maxHeight}');
                } else {
                    uploadImage(file);
                }
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function uploadImage(file){
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            url:'photo/upload',
            type:'post',
            data:formData,
            //cache设为false可以禁止浏览器对该URL（以及对应的HTTP方法）的缓存。 jQuery通过为URL添加一个冗余参数来实现。

            //该方法只对GET和HEAD起作用，然而IE8会缓存之前的GET结果来响应POST请求。 这里设置cache: false是为了兼容IE8。
            //cache: false, //上传文件不需要缓存
            //Query会将data对象转换为字符串来发送HTTP请求，默认情况下会用 application/x-www-form-urlencoded编码来进行转换。 我们设置contentType: false后该转换会失败，因此设置processData: false来禁止该转换过程。
            processData: false, // 告诉jQuery不要去处理发送的数据
            //Query中content-type默认值为application/x-www-form-urlencoded， 因此传给data参数的对象会默认被转换为query string（见HTTP 表单编码 enctype）。
            //我们不需要jQuery做这个转换，否则会破坏掉multipart/form-data的编码格式。 因此设置contentType: false来禁止jQuery的转换操作。
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function(response) {
                alert('上传成功');
                $('#errorMessage').text('');
                fetchData();
            },
            error: function() {
                showError('上传失败，请重试');
            }
        })
    }

    function deleteImage(event, imageId) {
        if (confirm('确定删除该图片吗？')) {
            $.ajax({
                url: 'photo/delete?id=' + imageId,
                type: 'post',
                success: function(data) {
                    fetchData();
                },
                error: function() {
                    showError('删除失败，请重试');
                }
            });
        }
    }

    function showError(message) {
        $('#errorMessage').text(message);
    }

    //$(document).ready(function() {
    $( function(){
        lightbox.option({
            'resizeDuration': 0,
            'showImageNumberLabel': false
        });
        // 初始加载数据
        fetchData();

        $('.prev').on('click', function() {
            if (photoCurrentPage > 1) {
                photoCurrentPage--;
                paginationParam.offset = (photoCurrentPage - 1) * paginationParam.limit;
                fetchData();
            }
        });

        $('.next').on('click', function() {
            if (photoCurrentPage < photoTotalPages) {
                photoCurrentPage++;
                paginationParam.offset = (photoCurrentPage - 1) * paginationParam.limit;
                fetchData();
            }
        });
    });
</script>